<template>
  <div>
    <!-- 自定义web截图 -->
    <!-- 
      截屏实现思路:
      获取当前可视区域的内容，将其存储起来
      为整个cnavas画布绘制蒙层
      在获取到的内容中进行拖拽，绘制镂空选区
      选择截图工具栏的工具，选择画笔大小等信息
      在选区内拖拽绘制对应的图形
      将选区内的内容转换为图片
     -->
    <!-- 
      截图工具栏中的每一个条目都拥有三种状态：正常状态、鼠标移入、点击
     -->
     <!-- 
       问题1：图形绘制
       鼠标在移动时图形重复绘制，解决方法时采用"历史记录"模式来解决这个问题。
       1.首先，需要定义一个数组变量，取名为history。
       2.当图形绘制结束鼠标抬起时，将当前画布状态保存至history。
       3.当鼠标处于移动状态时，我们取出history中最后一条记录。

       问题2：矩形绘制
       拿到鼠标的起始点坐标和鼠标移动时的坐标，通过这些数据计算出框选区域的宽高，
       通过canvas的rect这个API来绘制一个矩形。

       问题3：椭圆绘制
       根据坐标信息计算出圆的半径、圆心坐标，随后调用ellipse函数即可绘制一个椭圆出来

       问题4：箭头绘制
       需要通过三角函数来计算箭头两个点的坐标，通过三角函数中的反正切函数来计算箭头的角度，
       可通过canvas的moveTo、lineTo来绘制箭头了

       问题5：画笔绘制
       通过lineTo来实现，不过在绘制时需要注意：
       在鼠标按下时需要通过beginPath来清空一条路径，并移动画笔笔触到鼠标按下时的位置，
       否则鼠标的起始位置始终是0

       问题6：马赛克绘制
       获取鼠标划过路径区域的图像信息，将区域内的像素点绘制成周围相近的颜色

       问题7：文字绘制
       canvas没有直接提供API来供我们输入文字，
       但是它提供了填充文本的API，
       因此我们需要一个div来让用户输入文字，用户输入完成后将输入的文字填充到指定区域即可。

       问题8：下载功能
       只需要将裁剪框区域的内容放进一个新的canvas中，然后调用toDataURL方法就能拿到图片的base64地址，
       创建一个a标签，添加download属性，触发a标签的点击事件即可下载。

       问题9：撤销功能
       只需要在点击撤销按钮时，从history弹出一最后一条记录即可。

       问题10：关闭功能
       关闭功能指的是重置截图组件，因此我们需要通过emit向父组件推送销毁的消息。

       问题11：确认功能
       当用户点击确认后，我们需要将裁剪框内的内容转为base64，然后通过emit推送给父组件，最后重置组件。
      -->
      <!-- 
        需要使用的工具：
        1.html2canvas
       -->
  </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>

</style>